<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea name="" id="" placeholder="请输入您的评论（最多120个字）" maxlength="120" v-model="cmtcontent"></textarea>
        <mt-button type="primary" size="large" @click="addCmt">发表评论</mt-button>
        <ul class="cmt-list">
            <li class="cmt-item" v-for="(item,i) in cmtList" :key="item.id">
                <div class="cmt-title">
                    第{{i+1}}楼 &nbsp;&nbsp; 用户：{{item.uid==0?'匿名用户': item.uid}} &nbsp;&nbsp; 发表时间：{{ item.dateAdd | dateFormat }}
                </div>
                <div class="cmt-body">
                    {{ item.content }}
                </div>
            </li>
        </ul>
        <mt-button v-if="show" type="danger" size="large" plain @click="getMore">更多评论</mt-button>
    </div>
</template>

<script>
    // 导入querystring 
    import querystring from 'querystring'
    export default {
        data() {
            return {
                cmtcontent: '',
                size: 3,    //默认获取三条留言
                // status: 1,   //0待审核 1已审核 2已回复
                cmtList: [],
                show: true    //判断是否需要加载更多按钮
            }
        },
        created() {
            this.getCmt(this.size)
        },
        props:[ 'refId' ],
        methods: {
            // 发表评论
            addCmt() {
                if( this.cmtcontent.trim().length === 0 ){
                    this.$toast("评论不能为空")
                }else{
                    this.$http.post('/comment/add', querystring.stringify({
                        content: this.cmtcontent,
                        refId: this.refId
                    })).then( (res) => {
                        if(res.data.code === 0) {
                            this.$toast("评论成功")
                            let cmt = {
                                uid: 0,
                                dataAdd: new Date(),
                                content: this.cmtcontent
                            }
                            this.cmtList.unshift(cmt)
                            this.cmtcontent = ''
                        }
                    })
                }
            },
            // 获取留言列表
            getCmt(size) {
                this.$http.post('/comment/list', querystring.stringify({
                    pageSize: size,
                    // status: this.status,
                    refId: this.refId
                })).then( (res) => {
                    if( res.data.code === 0 && res.data.data.length > 0 ) {
                        this.cmtList = res.data.data
                    }else{
                        this.show = false;
                    }
                } )
            },
            // 获取更多评论
            getMore() {
                this.size = this.size + 3;
                this.getCmt(this.size);
            }
        },
        watch: {
            "cmtList.length":{
                handler: function (newVal, oldVal) {
                    if(newVal == oldVal) {
                        this.$toast("没有新的评论了")
                        this.show = false
                    }
                },
                deep: true
            }
        },
    }
</script>

<style lang="scss" scoped>
.cmt-container{
    width: 100%;
    h3{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        padding: 5px 10px;
        height: 80px;
    }
    .cmt-list{
        width: 100%;
        margin: 0;
        padding: 10px 0;
        .cmt-item{
            list-style: none;
            margin-bottom: 5px;
            .cmt-title{
                font-size: 12px;
                background-color: #eee;
                padding: 5px;
            }
            .cmt-body{
                font-size: 14px;
                line-height: 20px;
                text-indent: 2em;
                padding: 5px 0;
            }
        }
    }
}
</style>